<template>
  <div class="autoMid">
    <div>
      <el-table :data="tableData">
        <el-table-column label="志愿序号" width="200" type="index"> </el-table-column>
        <el-table-column prop="collage" label="院校信息" width="200"> </el-table-column>
        <el-table-column prop="field" label="专业信息" width="300"> </el-table-column>
        <el-table-column prop="type" label="类别" width="300"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="确认删除吗？"
              @confirm="handleClick(scope.row)"
            >
              <el-button slot="reference" size="small" plain type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { del } from '@/api/aspiration/aspiration'
export default {
  props: ['tableData'],
  watch: {
    tableData: {
      immediate: true,
      handler(newVAl, oldVal) {
        this.data = newVAl
      }
    }
  },
  data() {
    return {
      data: [],
      count: 0
    }
  },
  methods: {
    handleClick(row) {
      // const index = this.tableData.findIndex(obj => obj.id === row.id)
      // this.data.splice(index, 1)
      // console.log(index)
      del({ id: row.id }).then(res => {
        // console.log(res)
        this.$emit('query')
        this.$msg.success('删除成功')
      })
    }
  }
}
</script>

<style scoped>
.autoMid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
